<template>
  <div class="panel abs">
    <div class="sub-title building">
      <div class="icon inline"></div>
      <div class="text inline">房屋信息</div>
    </div>
    <div class="split-line"></div>
    <div class="info">
      <div class="item" v-for="(value, name) in houseInfo" :key="name" v-if="value && name !== '模型名称'">
        <span class="key">{{name}}：</span>
        <span class="value">{{value}}</span>
      </div>
    </div>
    <div class="btn" @click="closePanel">关闭</div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  methods: {
    closePanel() {
      this.$store.commit('patch_house_info', null)
    }
  },
  data() {
    return {}
  },
  computed: {
    ...mapState({
      houseInfo: state => state.houseInfo
    })
  }
}
</script>

<style lang="less" scoped>
.split-line{
  width: 300px;
  height: 1px;
  margin: 5px auto;
  background-image: url(~@/assets/images/split-line.png);
  background-size: contain;
}
.panel{
  width: 350px;
  height: 480px;
  top: 0;
  right: 30px;
  background-image: url(~@/assets/images/bg2.png);
  background-size: 100% 100%;
  padding: 20px;
  pointer-events: initial;
  .sub-title{
    font-size: 20px;
    font-weight: bold;
    color: #4BF5F1;
    text-align: left;
    margin-top: 0;
    .icon{
      width: 24px;
      height: 24px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }
    &.building .icon{
      background-image: url(~@/assets/icons/building.png);
    }
    .text{
      margin-left: 10px;
    }
  }
  .info{
    text-align: left;
    font-size: 16px;
    margin-top: 5px;
    max-height: 330px;
    overflow: auto;
    .item{
      line-height: 30px;
      .key{
        color: #4BF5F1;
      }
    }
  }
  .btn{
    width: 160px;
    height: 50px;
    background-image: url(~@/assets/images/button.png);
    font-size: 16px;
    color: #002C46;
    margin: 0 auto;
    cursor: pointer;
    font-weight: bold;
    line-height: 50px;
    margin-top: 20px;
  }
}
</style>